﻿@page "/tables/cell"

<h3>Table 表格</h3>

<h4>单元格相关操作示例</h4>

<DemoBlock Title="合并单元格" Introduction="基础的表格展示用法" Name="MergeCell">
    <p>本例中通过设置 <code>OnCellRenderHandler</code> 回调委托，通过判断条件对 <code>Name</code> 与 <code>Address</code> 两列进行单元格合并操作，并且通过设置 <code>TableCellArgs</code> 属性 <code>Class</code> 值为 <code>cell-demo</code> 样式表名称对合并后单元格进行背景色设置</p>
    <Pre>.cell-demo {
    background-color: #ddd;
}</Pre>
    <Table TItem="Foo" Items="@Items.Take(3)">
        <TableColumns>
            <TableColumn @bind-Field="@context.DateTime" Width="140" />
            <TableColumn @bind-Field="@context.Name" OnCellRender="@OnCellRenderHandler" />
            <TableColumn @bind-Field="@context.Address" />
        </TableColumns>
    </Table>
</DemoBlock>

<DemoBlock Title="双击单元格" Introduction="通过设置 <code>OnDoubleClickColumn</code> 回调，设置当前单元格的双击事件" Name="OnDoubleClickCell">
    <Tips>
        <p>设置双击单元格回调后，鼠标悬停单元格后单元格出现下标横线，以作提示可通过 <code>.table-cell .is-dbcell</code> 样式覆盖</p>
    </Tips>
    <Table TItem="Foo" Items="@Items.Take(3)" IsBordered="true" OnDoubleClickCellCallback="@OnDoubleClickCellCallback">
        <TableColumns>
            <TableColumn @bind-Field="@context.DateTime" Width="180" />
            <TableColumn @bind-Field="@context.Name" />
            <TableColumn @bind-Field="@context.Address" />
            <TableColumn @bind-Field="@context.Complete" />
        </TableColumns>
    </Table>
</DemoBlock>

<AttributeTable Items="GetAttributes()" Title="TableCellArgs"></AttributeTable>
